<template>
	<!-- 第一个参数{}是原有的属性， 通过customStyle可以添加一些自定义属性 @tap是点击事件-->
	<view :style="[
		{
			position:position,
			zIndex:zIndex,
			top: $addUnit(top),
			bottom: $addUnit(bottom),
			left: $addUnit(left),
			opacity: opacity,
			flex: flex,
			display: display,
			flexDirection: (column ? 'column' : 'row'),
			flexWrap: flexWrap,
			alignItems : alignItems,
			justifyContent : justifyContent,
			overflow : overflow,
			background : background,
			transform : transform,
			transition : transition,
			fontSize : $addUnit( size ),
			width : $addUnit( width ),
			height : $addUnit( height ),
			minwidth : $addUnit(minwidth),
			maxwidth : $addUnit( maxwidth),
			minHeight : $addUnit( minHeight),
			maxHeight : $addUnit( maxHeight),
			borderRadius : $addUnit(borderRadius),
			border : border,
			borderTop : borderTop,
			borderRight : borderRight,
			borderBottom : borderBottom,
			borderLeft : borderLeft,
			padding : $addUnit( padding ),
			paddingTop : $addUnit( paddingTop ),
			paddingRight : $addUnit( paddingRight ),
			paddingBottom : $addUnit( paddingBottom ),
			paddingLeft : $addUnit( paddingLeft ),
			margin: $addUnit( margin),
			marginLeft : $addUnit(marginLeft ),
			marginRight : $addUnit(marginRight),
			marginTop : $addUnit(marginTop) ,
			marginBottom :$addUnit( marginBottom)
		}, 
		customStyle]" v-if="vif" v-show="show" @tap="tap">
			<slot>
				<!-- 内容 -->
			</slot>
		
	</view>
</template>

<script>
	export default {
		name:"myView",
		data() {
			return {
				
			};
		},
		props: {
			position: {
				type: String,
				default: ''
			},
			zIndex: {
				type: [String,Number],
				default: ''
			},
			//默认fLex
			//jnline认 none隐藏hidden占位起藏inLine-block行内块元素 block块级元素有换行符 inher
			display: {
				type: String,
				default: 'flex'
			},
			//透明度
			opacity: {
				type: [String,Number],
				default: '1'
			},
			//占比
			flex:{
				type: String,
				default: ""
			},
			//默认flex row
			column:{
				type: Boolean,
				default: false
			},
			//通过vif控制显示和隐藏
			vif: {
				type: Boolean,
				default: true
			},
			//通过show控制显示和隐藏
			show: {
				type: Boolean,
				default: true
			},
			//默认居中
			//stretch 默认拉伸以适应容器|center容器的中心|fLex-startlflex-end|baseLine/initialL/inher
			alignItems: {
				type: String,
				default: ""
			},
			//默认两边
			// space-between分居两边·space-anound.平均.fLex-end尾部.flex-start头部-Left表示从左到右
			justifyContent: {
				type: String,
				default: ""
			},
			//默认值visible hidden scroll auto inherit(维承)
			overflow: {
				type: String,
				default: ""
			},
			//宽度
			width: {
				type: [String,Number],
				default: ""
			},
			//高度
			height: {
				type: [String,Number],
				default: ""
			},
			//背景颜色
			background: {
				type: String,
				default: "-"
			},
			//旋转-none-matrix(n,n,n,n,n,n) -matrix3d(n,n,n,n,n,n,n,n,n,n,n ,n,n,n , n,n) -translote(x,y) translate3d(x,y,z)-translateX(x)-transLateY(y)-transLote2(z)-scale(x,y) scaled(x,y,z) -scaleX(x)·scaLeY(y)-scalez(z) rotate(angle) -notate3d(x, y , z ,angLe / rotateX(angLe) rotateY(angLe) rotateZ(ang.e) skew(x-angle,y-angle) skewX( angle) skewY( angle) perspective(n)
			//https://www.w3school.com.cn/cssref/pr_transform.asp
			transform: {
				type: String,
				default: ""
			},
			//过渡
			transition: {
				type: String,
				default: ""
			},
			//字体大小
			size: {
				type: [String,Number],
				default: ''
			},
			//最小高度
			minHeight: {
				type: [String,Number],
				default: ''
			},
			//最大高度
			maxHeight: {
				type: [String,Number],
				default: ''
			},
			//圆角
			borderRadius: {
				type: [String,Number],
				default: ''
			},
			//边框
			border: {
				type: String,
				default: ""
			},
			//上边线
			borderTop: {
				type: String,
				default: ""
			},
			//右边线
			borderRight: {
				type: String,
				default: ""
			},
			//底边线
			borderBottom: {
				type: String,
				default: ""
			},
			//左边线
			borderLeft: {
				type: String,
				default: ""
			},
			//内边距
			padding: {
				type: [String,Number],
				default: ""
			},
			//上内边距
			paddingTop: {
				type: [String,Number],
				default: ""
			},
			//右内边距
			paddingRight: {
				type: [String,Number],
				default: ""
			},
			//底内边距
			paddingBottom: {
				type: [String,Number],
				default: ""
			},
			//左内边距
			paddingLeft: {
				type: [String,Number],
				default: ""
			},
			top: {
				type: [String,Number],
				default: ''
			},
			bottom: {
				type: [String,Number],
				default: ''
			},
			left: {
				type: [String,Number],
				default: ''
			},
			//规定灵活项目是否拆行或拆列 nowrap wrap wrap-reverse initial inherit
			flexWrap: {
				type: [String,Number],
				default: ''
			},
			//最小宽度
			minwidth: {
				type: [String,Number],
				default: ''
			},
			//最大宽度
			maxwidth: {
				type: [String,Number],
				default: ''
			},
			margin: {
				type: [String,Number],
				default: ''
			},
			marginLeft: {
				type: [String,Number],
				default: ''
			},
			marginRight: {
				type: [String,Number],
				default: ''
			},
			marginTop: {
				type: [String,Number],
				default: ''
			},
			marginBottom: {
				type: [String,Number],
				default: ''
			},
			customStyle: {
				type: Object,
				default(){
					return {}
				}
			}
		},
		methods: {
			tap(){
				this.$emit('confirm')
			}
		}
	}
</script>

<style lang="scss">

</style>